import React, { useState } from 'react'
import { storiesOf } from '@storybook/react'
// import { action } from '@storybook/addon-actions'

import Transition from './index'
import Button from '../Button'

function DefaultTransition() {
  const [transitionFlag, setTransitionFlag] = useState(true)
  return (
    <div>
      <Button
        onClick={() => {
          setTransitionFlag(!transitionFlag)
        }}>
        click me to show or hide the article
      </Button>
      <Transition in={transitionFlag} timeout={300} animation="zoom-in-top">
        <div>
          <p>i am transition</p>
          <p>i am transition</p>
          <p>i am transition</p>
          <p>i am transition</p>
        </div>
      </Transition>
    </div>
  )
}

function WrapperTransition() {
  const [transitionFlag, setTransitionFlag] = useState(true)
  return (
    <div>
      <Button
        onClick={() => {
          setTransitionFlag(!transitionFlag)
        }}>
        click me to show or hide the article
      </Button>
      <Transition
        in={transitionFlag}
        timeout={300}
        animation="zoom-in-top"
        needWrapper={true}
        wrapperClassName="my-wrapper">
        <p>my parent node is transition components</p>
        <p>my parent node is transition components</p>
        <p>my parent node is transition components</p>
        <p>my parent node is transition components</p>
      </Transition>
    </div>
  )
}

storiesOf('Transition Component', module)
  .add('Default Transition', DefaultTransition)
  .add('Wrapper Transition', WrapperTransition)
